<template>
  <div class="profile">
    <Header />
    <div class="profile-content">
      <div class="profile-content-header">
        <div class="profile-content-header-left">我的个人资料</div>
        <div v-show="$route.name=='profile_order'" class="profile-content-header-right">
          <div class="profile-content-header-right-input">
            <input placeholder="搜索订单" type="text">
            <div class="profile-content-header-right-input-search-icon">
              <el-icon size="20" color="rgb(20, 28, 29)">
                <Search />
              </el-icon>
            </div>
          </div>
          <div class="profile-content-header-right-search">搜索</div>
        </div>
      </div>
      <div class="profile-content-profile">
        <div class="profile-content-profile-left">
          <div class="profile-content-profile-left-avatar">
            <div class="profile-content-profile-left-avatar-img">
              <img src="/img/avatar.jpg" alt="">
            </div>
            <div class="profile-content-profile-left-avatar-desc">
              <div>大家好！</div>
              <div>张三</div>
            </div>
          </div>
          <div class="profile-content-profile-left-items">
            <div v-for="item in iconList" :key="item.id" :class="`profile-content-profile-left-item ${ selectIconId == item.id ? 'is_actived' : '' }`" @click="handlerMapping(item.path)">
              <div class="profile-content-profile-left-item-icon">
                <svg class="alibaba-icon" aria-hidden="true">
                  <use :xlink:href="`#${ item.icon }`"></use>
                </svg>
              </div>
              <div class="profile-content-profile-left-item-text">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="profile-content-profile-right">
          <RouterView />
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { useProfileState } from '@/state/profileState'
import { storeToRefs } from 'pinia'
import { watch } from 'vue'

const profileState = useProfileState()

const { iconList, selectIconId } = storeToRefs(profileState)

const router = useRouter()
const route = useRoute()

const handlerMapping = (name: string) => {
  router.push({
    name
  })
}

watch(() => route.name, () => {
  profileState.setSelectIconId(iconList.value.find(item => item.path === route.name)?.id  as number)
}, {
  immediate: true
})
</script>

<style lang="less" scoped>
@primary-color: #088395;
@primary-hover-color: rgb(22, 162, 184);

.profile {
  .profile-content {
    width: 70%;
    margin: auto;
    font-family: 'Helvetica';

    .profile-content-header {
      display: flex;
      justify-content: space-between;
      margin-top: 52px;

      .profile-content-header-left {
        color: rgb(20, 28, 29);
        font-size: 40px;
        font-weight: 700;
      }

      .profile-content-header-right {
        display: flex;

        .profile-content-header-right-input {
          width: 320px;
          height: 48px;
          position: relative;

          input {
            width: 100%;
            height: 100%;
            outline: none;

            box-sizing: border-box;
            border: 1px solid rgba(163, 170, 171, 0.2);
            border-radius: 10px;

            padding: 10px 16px 10px 40px;

            font-size: 16px;
            font-weight: 400;
          }

          input::placeholder {
            color: rgba(163, 170, 171, 0.8);
          }

          .profile-content-header-right-input-search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            z-index: 99;
            transform: translate(0, -40%);
          }
        }

        .profile-content-header-right-search {
          width: 130px;
          height: 48px;
          border-radius: 10px;
          background: rgb(8, 131, 149);
          display: flex;
          align-items: center;
          justify-content: center;

          color: rgb(255, 255, 255);
          font-size: 16px;
          font-weight: 400;

          margin-left: 20px;

          cursor: pointer;

          transition: all 0.4s;
        }

        .profile-content-header-right-search:hover {
          background-color: @primary-hover-color;
        }
      }
    }

    .profile-content-profile {
      display: flex;
      justify-content: space-between;
      margin-top: 52px;
      margin-bottom: 100px;

      .profile-content-profile-left {
        width:25%;
        padding: 20px 0;
        height: 473px;

        box-sizing: border-box;
        border: 1px solid rgba(163, 170, 171, 0.2);
        box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.02),0px 10px 40px -4px rgba(16, 24, 40, 0.02);
        background: rgb(255, 255, 255);

        .profile-content-profile-left-avatar {
          box-sizing: border-box;
          width: 100%;
          margin-bottom: 20px;
          padding-left: 20px;
          display: flex;
          border-bottom: 1px solid rgba(163, 170, 171, 0.2);
          padding-bottom: 22px;

          .profile-content-profile-left-avatar-img {
            img {
              width: 51px;
              height: 51px;
              border-radius: 50%;
            }
          }

          .profile-content-profile-left-avatar-desc {
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 16px;
            color: rgb(20, 28, 29);

            div:first-child {
              font-size: 14px;
              font-weight: 400;
            }

            div:last-child {
              font-size: 18px;
              font-weight: 700;
            }
          }
        }

        .profile-content-profile-left-items {
          .profile-content-profile-left-item {
            width: 100%;
            box-sizing: border-box;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            transition: all 0.3s;

            .profile-content-profile-left-item-icon {
              margin-bottom: -4.5px;
              transition: all 0.3s;

              .alibaba-icon {
                fill: rgb(20, 28, 29);
                width: 24px;
                height: 24px;
                transition: all 0.3s;
              }
            }

            .profile-content-profile-left-item-text {
              color: rgb(20, 28, 29);
              font-size: 16px;
              font-weight: 400;
              margin-left: 12px;
              transition: all 0.3s;
            }
          }

          .is_actived {
            background-color: rgb(8, 131, 149);
            
            .profile-content-profile-left-item-text {
              color: #fff;
            }

            .profile-content-profile-left-item-icon {
              .alibaba-icon {
                fill: #fff;
              }
            }
          }
        }
      }
      
      .profile-content-profile-right {
        width: 75%;
        box-sizing: border-box;
        padding-left: 50px;
      }
    }
  }
}
</style>